<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ModalAPI</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrapEx.css">
    <link rel="stylesheet" href="../js/prettyPrint/css/prettify.css">
    <link rel="stylesheet" href="api.css">


    <script src="../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/prettyPrint/js/prettify.js"></script>
</head>

<body onload="prettyPrint()">
    <div class="container-fluid">
        <div class="">
            <div class="span12">
                <h1>属性</h1>
                <hr/>
            </div>
            <div class="">
                <h3>bsEx.Modal </h3>
                添加引用
                <pre class="prettyprint linenums"><code> &lt;link rel=&quot;stylesheet&quot; href=&quot;../../css/bootstrap.min.css&quot;&gt;
 &lt;link rel=&quot;stylesheet&quot; href=&quot;../../css/bootstrapEx.css&quot;&gt;
 
 &lt;script src=&quot;../../js/jquery-1.9.1.min.js&quot;&gt;&lt;/script&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;../../js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;../../js/bootstrapEx2.0.js&quot;&gt;&lt;/script&gt;</code></pre>
                <p>继承自bsEx.ui.base:</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-2 col-sm-2">属性名称</div>
                        <div class="col-xs-2 col-sm-2">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-5 col-sm-5">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">id</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">bsEx.getId()</div>
                        <div class="col-xs-5 col-sm-5">控件ID</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">renderto</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">无(非必填，会由系统生成)</div>
                        <div class="col-xs-5 col-sm-5">绘制到容器的对象或选择器</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">type</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">Modal</div>
                        <div class="col-xs-5 col-sm-5">控件类型</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">firstInit</div>
                        <div class="col-xs-2 col-sm-2">boolean</div>
                        <div class="col-xs-3 col-sm-3">false</div>
                        <div class="col-xs-5 col-sm-5">第一次加载是否完成</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">language</div>
                        <div class="col-xs-2 col-sm-2">bsEx.language</div>
                        <div class="col-xs-3 col-sm-3">bsEx.language.zhCN</div>
                        <div class="col-xs-5 col-sm-5">当前语言包</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">cls</div>
                        <div class="col-xs-3 col-sm-3">string</div>
                        <div class="col-xs-3 col-sm-3">""</div>
                        <div class="col-xs-3 col-sm-3">自定义样式 在绘制之前会在renderto加入该样式</div>
                    </div>
                </div>
                <p>控件实例属性:</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-2 col-sm-2">属性名称</div>
                        <div class="col-xs-2 col-sm-2">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-5 col-sm-5">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">modal</div>
                        <div class="col-xs-2 col-sm-2">object</div>
                        <div class="col-xs-3 col-sm-3">{ show: true, backdrop: 'static' }</div>
                        <div class="col-xs-5 col-sm-5">bootstrap原生modal参数，会在init时生效</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">body</div>
                        <div class="col-xs-2 col-sm-2">object(jqDOM)</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-5 col-sm-5">添加到bodyel中的信息</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">headerel</div>
                        <div class="col-xs-2 col-sm-2">object(jqDOM)</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-5 col-sm-5">当前控件的头元素，该元素包含modal标题 关闭按钮等</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">bodyel</div>
                        <div class="col-xs-2 col-sm-2">object(jqDOM)</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-5 col-sm-5">当前控件的主体元素，该元素包含modal中间的显示部分</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">footerel</div>
                        <div class="col-xs-2 col-sm-2">object(jqDOM)</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-5 col-sm-5">当前控件的底部元素，该元素包含modal的button</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">btns</div>
                        <div class="col-xs-2 col-sm-2">数组[]</div>
                        <div class="col-xs-3 col-sm-3">[]</div>
                        <div class="col-xs-5 col-sm-5">当前控件的按钮，会在modal控件底部显示</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">title</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">bsEx.language.zhCN.Modal.<br>title(窗口标题)</div>
                        <div class="col-xs-5 col-sm-5">modal标题,在头部 header 中显示</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">closebtn</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">bsEx.language.zhCN.Modal.<br>closebtn(关闭)</div>
                        <div class="col-xs-5 col-sm-5">关闭按钮显示的名称 见 btns 属性</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">showclosebtn</div>
                        <div class="col-xs-2 col-sm-2">boolean</div>
                        <div class="col-xs-3 col-sm-3">true</div>
                        <div class="col-xs-5 col-sm-5">是否显示关闭按钮</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">initMax</div>
                        <div class="col-xs-2 col-sm-2">boolean</div>
                        <div class="col-xs-3 col-sm-3">false</div>
                        <div class="col-xs-5 col-sm-5">初始时是否最大化</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">isiframe</div>
                        <div class="col-xs-2 col-sm-2">boolean</div>
                        <div class="col-xs-3 col-sm-3">false</div>
                        <div class="col-xs-5 col-sm-5">是否是iframe页面</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">iframe</div>
                        <div class="col-xs-2 col-sm-2">Object</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-5 col-sm-5">在iframe绘制完成后返回iframe对象</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">iframefn</div>
                        <div class="col-xs-2 col-sm-2">Object</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-5 col-sm-5">在iframe绘制完成后返回iframe.contentWindow对象,方便执行方法</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">url</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">''</div>
                        <div class="col-xs-5 col-sm-5">iframe页面地址</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var Modal1 = new bsEx.Modal("#modal1");//创建控件
 alert(Modal1.type); //Modal
 alert(Modal1.renderto); //#modal1</code> </pre>
                <hr/>
            </div>
        </div>
        <div class="">
            <div class="span12">
                <h1>方法</h1>
                <hr/>
            </div>
            <div class="">
                <h3>init(isshow) <small>返回类型: 无</small></h3>
                <p>绘制方法</p>
                <div class="table">
                        <div class="row title">
                            <div class="col-xs-2 col-sm-2">属性名称</div>
                            <div class="col-xs-2 col-sm-2">类型</div>
                            <div class="col-xs-3 col-sm-3">默认值</div>
                            <div class="col-xs-5 col-sm-5">备注说明</div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">isshow</div>
                            <div class="col-xs-2 col-sm-2">boolean</div>
                            <div class="col-xs-3 col-sm-3">false</div>
                            <div class="col-xs-5 col-sm-5">是否在绘制完成后立即显示</div>
                        </div>
                    </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>setHeigth(h) <small>返回类型: 无</small></h3>
                <p>设置高度</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">h</div>
                        <div class="col-xs-3 col-sm-3">string</div>
                        <div class="col-xs-3 col-sm-3">无(必填)</div>
                        <div class="col-xs-3 col-sm-3">要设置的高度，会影响body元素的最小高度min-height</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var Modal1 = new bsEx.Modal("#modal1");//创建控件
 Modal1.setHeigth("300px");//设置高度</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>setWidth(w) <small>返回类型: 无</small></h3>
                <p>设置宽度</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">w</div>
                        <div class="col-xs-3 col-sm-3">string</div>
                        <div class="col-xs-3 col-sm-3">无(必填)</div>
                        <div class="col-xs-3 col-sm-3">要设置的高度，会影响width属性</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var Modal1 = new bsEx.Modal("#modal1");//创建控件
 Modal1.setWidth("300px");//设置宽度</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>setTitle(title) <small>返回类型: 无</small></h3>
                <p>设置modal标题</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">title</div>
                        <div class="col-xs-3 col-sm-3">string</div>
                        <div class="col-xs-3 col-sm-3">无(必填)</div>
                        <div class="col-xs-3 col-sm-3">要设置标题</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var Modal1 = new bsEx.Modal("#modal1");//创建控件
 Modal1.setTitle("这是标题");//设置标题</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>doLayout() <small>返回类型: 无</small></h3>
                <p>在窗口最大化时(initMax=true)重写高度和宽度,高度为70%宽度为95%</p>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>show() <small>返回类型: 无</small></h3>
                <p>显示modal</p>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>hide() <small>返回类型: 无</small></h3>
                <p>关闭/隐藏modal</p>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>toggle() <small>返回类型: 无</small></h3>
                <p>切换显示状态</p>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
        </div>
        <div class="">
            <div class="span12">
                <h1>事件</h1>
                <hr/>
            </div>
            <div>
                <h3>注</h3>
                <pre class="prettyprint"><code>$(modal1.renderto)会继承bootstrap原生modal的事件，即
show.bs.modal|shown.bs.modal|hide.bs.modal|hidden.bs.modal
写法为 $(modal1.renderto).on('show.bs.modal', function(){});...</code> </pre>
                <hr>
            </div>
            <div class="">
                <h3>beforeinit(t) <small>返回类型: 无</small></h3>
                <p>绘制前事件，执行init()后第一个执行，可以对实例进行操作影响init执行</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">t</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">控件实例</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var Modal1 = new bsEx.Modal("#modal1");//创建控件
 Modal1.on("beforeinit",function(t){alert(t.id++"绘制开始")});//bsex1绘制开始</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>inited(t) <small>返回类型: 无</small></h3>
                <p>绘制后事件，执行init()后执行</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">t</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">控件实例</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var Modal1 = new bsEx.Modal("#modal1");//创建控件
 Modal1.on("inited",function(t){alert(t.id+"绘制完毕")});//bsex1绘制完毕</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>beforeshow(t) <small>返回类型: 无</small></h3>
                <p>绘制后,显示之前事件，执行show()开始时触发</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">t</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">当前控件实例</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var Modal1 = new bsEx.Modal("#modal1");//创建控件
 Modal1.on("beforeshow",function(t){alert(t.id+"开始显示")});//bsex1开始显示</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>showed(t) <small>返回类型: 无</small></h3>
                <p>绘制后,显示后事件，执行show()结束后触发</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">t</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">当前控件实例</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var Modal1 = new bsEx.Modal("#modal1");//创建控件
 Modal1.on("showed",function(t){alert(t.id+"显示完毕")});//bsex1显示完毕</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>beforehide(t) <small>返回类型: 无</small></h3>
                <p>绘制后,隐藏前事件，执行hide()开始时触发</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">t</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">当前控件实例</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var Modal1 = new bsEx.Modal("#modal1");//创建控件
 Modal1.on("beforehide",function(t){alert(t.id+"开始隐藏")});//bsex1开始隐藏</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>hidden(t) <small>返回类型: 无</small></h3>
                <p>绘制后,隐藏后事件，执行hide()结束后触发</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">t</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">当前控件实例</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var Modal1 = new bsEx.Modal("#modal1");//创建控件
 Modal1.on("hideend",function(t){alert(t.id+"隐藏完毕")});//bsex1隐藏完毕</code> </pre>
                <hr/>
            </div>
        </div>
</body>
<script>
      $(document).ready(function () {
          $.each($(".table").find(".row div"),function(i,t){
              $(t).removeClass("col-xs-3 col-sm-3");
          });
          $.each($(".table").find(".row"),function(i,t){
              $(t).find("div").eq(0).addClass("col-xs-2 col-sm-2");
              $(t).find("div").eq(1).addClass("col-xs-2 col-sm-2");
              $(t).find("div").eq(2).addClass("col-xs-3 col-sm-3");
              $(t).find("div").eq(3).addClass("col-xs-5 col-sm-5");
          });
      });
</script>
</html>